<script setup>
import { ref, onMounted } from "vue"
import { ElMessage, ElMessageBox } from "element-plus"
import orderApi from '@/api/order_api.js'

// 表单数据
const orderForm = ref({
  start_address: '',
  start_lng: '',
  start_lat: '',
  end_address: '',
  end_lng: '',
  end_lat: '',
  distance: '',
  price: ''
})

// 当前用户信息
const currentUser = ref({})

// 表单引用
const formRef = ref()

// 提交订单
const submitOrder = async () => {
  if (!orderForm.value.start_address || !orderForm.value.end_address) {
    ElMessage.warning('请填写起始地址和终点地址')
    return
  }

  try {
    // 获取当前用户ID（实际项目中应从store或token中获取）
    const userId = localStorage.getItem('userId') || 1

    const orderData = {
      user_id: userId,
      ...orderForm.value,
      status: 0, // 待接单状态
      payment_status: 0 // 未支付状态
    }

    const result = await orderApi.addOrder(orderData)

    if (result && (result.code === 200 || !result.code)) {
      ElMessage.success('订单提交成功')
      // 重置表单
      orderForm.value = {
        start_address: '',
        start_lng: '',
        start_lat: '',
        end_address: '',
        end_lng: '',
        end_lat: '',
        distance: '',
        price: ''
      }
    } else {
      ElMessage.error(result.msg || '订单提交失败')
    }
  } catch (error) {
    console.error('提交订单出错:', error)
    ElMessage.error('订单提交失败，请稍后重试')
  }
}

// 获取当前位置（模拟）
const getCurrentLocation = () => {
  // 在实际应用中，这里应该调用浏览器的地理位置API
  ElMessage.info('获取当前位置（模拟）')
  orderForm.value.start_address = '北京市朝阳区某某街道'
  orderForm.value.start_lng = '116.4074'
  orderForm.value.start_lat = '39.9042'
}

// 页面加载完成后执行
onMounted(() => {
  // 实际项目中应该从store或token中获取当前用户信息
  currentUser.value = {
    id: 1,
    username: 'test_user'
  }
})
</script>

<template>
  <div class="place-order-container">
    <h2>发布订单</h2>

    <el-card class="order-form-card">
      <el-form
          ref="formRef"
          :model="orderForm"
          label-width="100px"
          label-position="left"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="起始地址" prop="start_address" required>
              <el-input
                  v-model="orderForm.start_address"
                  placeholder="请输入起始地址"
              >
                <template #append>
                  <el-button @click="getCurrentLocation">当前位置</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="经度" prop="start_lng">
              <el-input
                  v-model="orderForm.start_lng"
                  placeholder="起始经度"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纬度" prop="start_lat">
              <el-input
                  v-model="orderForm.start_lat"
                  placeholder="起始纬度"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="终点地址" prop="end_address" required>
              <el-input
                  v-model="orderForm.end_address"
                  placeholder="请输入终点地址"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="经度" prop="end_lng">
              <el-input
                  v-model="orderForm.end_lng"
                  placeholder="终点经度"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纬度" prop="end_lat">
              <el-input
                  v-model="orderForm.end_lat"
                  placeholder="终点纬度"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="距离(km)" prop="distance">
              <el-input
                  v-model="orderForm.distance"
                  placeholder="预估距离"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="价格(元)" prop="price">
              <el-input
                  v-model="orderForm.price"
                  placeholder="预估价格"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button
              type="primary"
              @click="submitOrder"
          >
            发布订单
          </el-button>
          <el-button @click="() => orderForm = {
            start_address: '',
            start_lng: '',
            start_lat: '',
            end_address: '',
            end_lng: '',
            end_lat: '',
            distance: '',
            price: ''
          }">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="tips-card" style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          <span>订单说明</span>
        </div>
      </template>
      <ul>
        <li>订单发布后，附近司机将收到通知</li>
        <li>司机会根据距离和路况决定是否接单</li>
        <li>订单状态可在"我的订单"中查看</li>
        <li>行程结束后请及时支付费用</li>
      </ul>
    </el-card>
  </div>
</template>

<style scoped>
.place-order-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.order-form-card {
  margin-bottom: 20px;
}

.tips-card ul {
  padding-left: 20px;
}

.tips-card li {
  margin-bottom: 10px;
  line-height: 1.6;
}

.card-header {
  font-weight: bold;
}
</style>
